<template>
	<view class="u-form">
		<!-- 最上面的搜索框 -->
		<view class="search-info">
			<view class="search-item">
				<input type="text" class="search-input" placeholder="请输入关键字搜索" @input="searchList" maxlength="50"
					v-model="searchText" />
			</view>
		</view>
	    <!-- 中间勾选列表-->
		<u-list >
			<u-list-item v-for="(item, index) in levels" :title="item.label" :key="index" v-if="item.show">
				<view class="list-item">
					<view class="list-item-left">
						<u-checkbox-group>
							<u-checkbox shape="circle" :label="item.label" :checked="item.checked" 
								@change="chooseAll(item, index)"></u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="list-item-right">
						<u-icon :name="item.expand ? 'arrow-up' : 'arrow-down'" @click="toggleExpand(index)"></u-icon>
					</view>
				</view>
				<view v-if='item.expand'>
					<u-list-item v-for="(item2, index2) in item.children" :key="index2" v-if="item2.show" class="list-item-second">
					   <u-checkbox-group >
							<u-checkbox shape="circle" :label="item2.label" :checked="item2.checked" 
								@change="chooseOne(index, index2)"></u-checkbox>
					   </u-checkbox-group>
					</u-list-item>
				</view>
			</u-list-item>
		</u-list>
		<view class="view">
			<view class="view-left">
				<u-checkbox-group>
					<u-checkbox shape="circle" label="全选/已选" :checked="checkAll" @change="toggleSelectAll">
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="view-right">
				<u-button text="确定选择" size="normal" type="success" @click="confirmSelection"></u-button>
			</view>
		</view>
  </view>
</template>

<script>
import selectTree from "@/components/DLHTX-select_tree/select-tree"
export default {
  components: {selectTree},
  data() {
    return {
		searchText: '',// 搜索关键词
		selectedItems: [], // 已选中的项
		checkAll: false ,// 是否全选
		levels: [
          
        ]
	}
  },
  created() {
  	this.getStudentList();
  },
  methods: {
	getStudentList(){
		this.$u.api.getStudentList().then(response => {
			this.levels = response.data;
			this.levels.forEach(item => {
			    item.show = true;
				item.checked = false;
				item.children.forEach(item2 => {
				    item2.show = true;
					item2.checked = false;
				});
			});
		});
	},
	chooseAll(item, index) {
	    //选中一级目录的所有
	    if (this.levels[index].checked) {
	        //
	        this.$set(this.levels[index], "checked", false);
	        this.levels[index].children.forEach(item => {
	            item.checked = false;
	        });
			this.$emit('input', this.levels)
	    } else {
	        this.$set(this.levels[index], "checked", true);
	        this.levels[index].children.forEach(item => {
	            item.checked = true;
	        });
			this.$emit('input', this.levels)
	    }
	    this.$set(this.levels[index], "expand", true);
	    this.$emit('input', this.levels)
	    this.$forceUpdate();
	},
    chooseOne(i1, i2) {
        if (this.levels[i1].children[i2].checked) {
            this.$set(this.levels[i1], "checked", true);
            this.$set(this.levels[i1].children[i2], "checked", false);
    		if (this.levels[i1].children.every(item => item.checked == false)) {
    		    //判断是否全部都是选中
    		    this.$set(this.levels[i1], "checked", false);
    		}
            this.$forceUpdate();
            this.$emit('input', this.levels)
        } else {
            //增加勾选
            this.$set(this.levels[i1], "checked", true);
            this.$set(this.levels[i1].children[i2], "checked", true);
            if (this.levels[i1].children.every(item => item.checked == true)) {
                //判断是否全部都是选中
                this.$set(this.levels[i1], "checked", true);
            }
            this.$emit('input', this.levels)
            this.$forceUpdate();
        }
    },
	toggleSelectAll() {
      this.checkAll = !this.checkAll;
	  // 所有可选框去反
	  this.levels.forEach((items) => {
	  	items.checked = this.checkAll;
		items.children.forEach((item) => {
			item.checked = this.checkAll;
		});
	  })
      if (this.checkAll) {
        // 全选时将所有选项添加到已选中的项数组中
		this.levels.forEach((items) => {
			items.children.forEach((item) => {
				this.selectedItems.push(item.id);
			});
		})
      } else {
        this.selectedItems = [];
      }
    },
	toggleExpand(index) {
		if (this.levels[index].expand) {
		    this.$set(this.levels[index], "expand", false);
			this.$forceUpdate();
		} else {
		    this.$set(this.levels[index], "expand", true);
			this.$forceUpdate()
		}
	},
    confirmSelection() {
		this.levels.forEach(item => {
			item.children.forEach(item2 => {
				if (item2.checked) {
					this.selectedItems.push(item2);	
				}
			})
		});
      // 执行选择确认的逻辑，可以将选中的项传递给其他方法或组件进行处理
	  const eventChannel = this.getOpenerEventChannel();
	  eventChannel.emit('selectStudent', this.selectedItems);
	  uni.navigateBack();
    },
	searchList() {
		// 刷选已选择的选项。
		this.levels.forEach(item => {
			let children = item.children.filter(item2 => { return item2.label.indexOf(this.searchText) > -1});
			if(children.length <= 0){
				this.levels.show = false;
			} else {
				this.levels.show = true;
			}
			item.children.filter(item2 => {  
				if (item2.label.indexOf(this.searchText) > -1) {
					item2.show = true;
				} else {
					item2.show = false;
				}
			});
		});
	}
  }
};
</script>

<style>
.search-info {
	width: 100%;
	height: 96rpx;
	display: flex;
	align-items: center;
	justify-content: center;

	.search-item {
		width: 690rpx;
		height: 70rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin-left: 20rpx;
		margin-right: 20rpx;;
		background-color: #f1f1f1;

		.search-input {
			width: calc(100% - 48rpx);
			height: 70rpx;
			line-height: 76rpx;
			color: #dadada;
			padding-left: 24rpx;
			padding-right: 24rpx;
		}
	}
}
.list-item{
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #d9d9d9;
	text-align: 30rpx;
}
.list-item-left {
	justify-content: flex-start;
	margin: 0rpx 0rpx 0rpx 10rpx;
	padding: 20rpx;
}
.list-item-right {
	justify-content: flex-end;
	padding: 20rpx;
}
.list-item-second {
	text-align: 30rpx;
	border-bottom: 1px solid #d9d9d9;
	margin: 0rpx 0rpx 10rpx 30rpx;
	padding: 20rpx;
}
.u-tabbar__content__item-wrapper{ 
	flex-direction: '';
}
.view { 
	display: flex;
	justify-content: space-between;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: #f4f4f4;
}
.view-left {
	display:flex;
	justify-content: flex-start;
	margin: 0rpx 0rpx 0rpx 20rpx;
}
.view-right {
	justify-content: flex-end;
	margin: 0rpx 20rpx 0rpx 0rpx;
	width: 30%;
}
</style>
